<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跑跑特工</title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="./utils/vant.css" />
    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="./utils/vue.js"></script>
    <script src="./utils/vant.js"></script>
    <!-- 引入axios（如果sendData是基于axios的） -->
    <script src="./utils/axios.js"></script>
    <!-- 自定义样式 -->
    <style>
        body {
            background-color: #f7f7f7;
        }

        .container {
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <van-nav-bar title="订单"></van-nav-bar>
        <div class="container">
            <van-cell-group inset>
                <van-cell title="1公里价格(一次)" value="1.5元"></van-cell>
                <van-cell title="3公里价格(一次)" value="2.5元"></van-cell>
            </van-cell-group>
            <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
                下单信息
            </van-divider>
            <van-cell-group inset>
                <van-cell title="乐跑id" :value=list.userId></van-cell>
                <van-cell title="乐跑公里" :value=list.km+'公里'></van-cell>
                <van-cell title="乐跑次数" :value=list.times+'次'></van-cell>
                <van-cell title="开始时间" :value=list.startDate></van-cell>
                <van-cell title="总金额" :value=list.amount/100+'元'></van-cell>
            </van-cell-group>
        </div>
        <div class="footer">
            <van-submit-bar :price=list.amount button-text="提交订单" @submit="onSubmit"></van-submit-bar>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                list: {},
                wxdata: {}
            }
        },
        methods: {
            //调起微信支付
            onSubmit() {
                if (typeof WeixinJSBridge === "undefined") {
                    if (document.addEventListener) {
                        document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false);
                    } else if (document.attachEvent) {
                        document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady);
                        document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady);
                    }
                } else {
                    WeixinJSBridge.invoke('getBrandWCPayRequest', {
                        "appId": "wx564d88ff17b07255",     //公众号ID，由商户传入
                        "timeStamp": this.wxdata.timeStamp,     //时间戳，自1970年以来的秒数
                        "nonceStr": this.wxdata.nonceStr,      //随机串
                        "package": this.wxdata.prepayId,
                        "signType": "RSA",     //微信签名方式：
                        "paySign": this.wxdata.paySign //微信签名
                    },
                        //必须用箭头函数，因为下面用的this需要指向全局，如果用普通函数的话，this会指向wx
                        (res) => {
                            if (res.err_msg === "get_brand_wcpay_request:ok") {
                                // 使用以上方式判断前端返回,微信团队郑重提示：
                                //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                                this.$notify({
                                    message: '订单支付成功,将在2秒后跳转至订单~~',
                                    color: '#ffffff',
                                    background: '#2ED0DF',
                                    duration: 1000,
                                })
                                setTimeout(() => {
                                    location.href = `./order.html`
                                }, 1000)
                            } else {
                                this.$notify({
                                    type: 'warning',
                                    message: '订单支付失败,请重新下单，如有疑问请添加客服解决~~',
                                    color: '#ffffff',
                                    background: '#ee0a24',
                                    duration: 2000,
                                })
                            }
                        })
                }
            }
        },
        mounted() {
            this.list = JSON.parse(localStorage.getItem('data'))
            this.wxdata = JSON.parse(localStorage.getItem('wxdata'))
        }
    })
</script>

</html>